<template>
  <div class="admin">
    <c-admin-menu
      :class="['admin-menu', collapse && 'admin-menu-small']"
    ></c-admin-menu>
    <c-admin-header
      :class="['admin-header', collapse && 'admin-header-full']"
    ></c-admin-header>
    <c-admin-main
      :class="['admin-main', collapse && 'admin-main-full']"
    ></c-admin-main>
  </div>
</template>
<script>
import CAdminHeader from './header/Index.vue'
import CAdminMenu from './menu/Index.vue'
import CAdminMain from './main/Index.vue'
import { mapState, mapActions } from 'vuex'
import { getUserName } from '@/http/api/v1/login'
export default {
  name: 'PAdmin',
  components: {
    CAdminHeader,
    CAdminMenu,
    CAdminMain
  },
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapState({
      collapse: state => state.menu.collapse
    })
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.setLangs()
    getUserName().then(({ data }) => {
      data && this.setName(data.userName || '用户')
    })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    ...mapActions({
      setLangs: 'lang/setLangs',
      setName: 'login/setName'
    })
  }
}
</script>
<style lang="scss">
@include admin {
  &-menu,
  &-header,
  &-main {
    float: left;
  }
  &-menu {
    width: 256px;
  }
  &-main,
  &-header {
    width: calc(100% - 256px);
  }
  &-menu-small {
    width: 54px;
  }
  &-header-full,
  &-main-full {
    width: calc(100% - 54px);
  }

  &-main {
    height: calc(100% - 100px);
    box-sizing: border-box;
    overflow: auto;
    background-color: #eff0f4;
    padding: 10px 14px;
  }
}
</style>
